<template>
    <div class="shoppingList" ref="shoppingList">
        <div>
            <div v-for="(v, index) in shoppingList" :key="index" class="item">
                <div class="check">
                    <div></div>
                    </div>
                <div class="img" :style="`background-image:url(${v.img})`"></div>
                <div class="content">
                    <div class="title">{{ v.title }}</div>
                    <div class="shops">{{ v.shops }}</div>
                    <div>
                        <span class="nowPrice">￥{{ v.nowPrice }}</span>
                        <span class="oldPrice">￥{{ v.oldPrice }}</span>
                        <span class="size">x{{ v.size }}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import BScroll from 'better-scroll';

export default {
    props:[
        'shoppingList',
    ],
    methods:{
        initScroll(){
            setTimeout(()=>{
                new BScroll(this.$refs.shoppingList,{click:true});
            },100)
        }
    },
    mounted(){
        this.initScroll();
    }
}
</script>

<style lang="less" scoped>
.shoppingList{
    position: absolute;        
    width: 100%;
    top: @h;
    bottom: @h;
    width: 100%;
    .item{
        display: flex;
        border-bottom: 1px solid @cc;
        padding: 10px 10px 10px 0px;
        box-sizing: border-box;
        width: 100%;
        .check{
            width: 15%;      
            div{
                background-image: url('../assets/checkbox.png');
                background-size: 100%;
                background-position: bottom;
                width: 35px;
                height: 35px;
                margin:85px auto;
            }            
        }
        .img{
            width: 30%;
            height: 0px;
            padding-bottom: 30%;
            background-size: 100%;
            background-repeat: no-repeat;
            background-position: center;
        }
        .content{
            width: 100%;
            padding: 0px 25px;
            box-sizing: border-box;
            font-size: 26px;
            .title{
                font-size: 28px;
                height: 135px;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 3;
                overflow: hidden;
                color: @font;
                text-align: justify;
            }
            .shops{
                color: @66;
            }
            div{
                .nowPrice{
                    font-weight: 600;
                    font-size: 32px;
                }
                .oldPrice{
                    text-decoration:line-through;
                    margin-left: 15px;
                }
                .size{
                    float: right;
                    font-size: 30px;
                }
            }
        }
    }
}
</style>
